<template>
    <div class="budgetLedgerPage">
        <div class="search-wrap d-flex a-center">
            <div class="search-item d-flex a-center">
                <label>部门</label>
                <el-select v-model="form.departmentId" class="m-l5" placeholder="请选择部门">
                    <el-option v-for="(item,index) in departmentList" :key="index" :label="item.deptName" :value="item.deptId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>项目名称</label>
                <el-select v-model="form.projectId" class="m-l5" placeholder="请选择项目" clearable>
                    <el-option v-for="(item,index) in projectList" :key="index" :label="item.projectName" :value="item.projectId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>年度</label>
                <el-date-picker
                        class="m-l10"
                        clearable
                        v-model="form.year"
                        value-format="YYYY"
                        size="large"
                        type="year"
                        placeholder="请选择"
                />
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>预算类型</label>
                <el-select v-model="form.type" class="m-l5" placeholder="请选择预算类型" clearable>
                    <el-option label="收入" value="1"></el-option>
                    <el-option label="成本" value="2"></el-option>
                    <el-option label="费用" value="3"></el-option>
                    <el-option label="收益" value="4"></el-option>
                </el-select>
            </div>
            <div class="search-buttons m-l50">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
                <el-divider direction="vertical" />
<!--                <el-button
                        style="color:#FC7018;background: #FFFFFF;"
                        @click="templateDownload"
                >
                    模版下载
                </el-button>
                <el-button
                    style="color:#FC7018;background: #FFFFFF;"
                    @click="onImport"
                >
                    全年预算导入
                </el-button>-->
                <el-button
                    class="button_edit"
                    @click="onExport"
                >
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                class="m-t20"
                index
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
                @handleSelectionChange="handleSelectionChange"
        >
        </public-table>
    </div>

    <!-- 导入excel   -->
    <public-dialog
        :title="'导入余额表'"
        :width="'40%'"
        :confirmButtonTitle="'确认'"
        v-model:visible="visible"
        @onConfirm="onConfirm"
    >
        <div class="public-dialog-content d-flex flex-column">
            <el-upload
                ref="uploadRef"
                class="upload-demo"
                drag
                action="#"
                multiple
                :http-request="uploadFile"
            >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    将文件拖到此处或<em>点击上传</em>
                </div>
            </el-upload>
        </div>
    </public-dialog>
</template>

<script setup>
import {ElDatePicker, ElDivider, ElLoading, ElMessage, ElOption, ElSelect, ElUpload} from "element-plus";
import PublicTable from "@/components/PublicTable";
import {onMounted, reactive, ref} from "vue";
import {budgetManagement, companyApi, exportApi, fundManagementApi} from "@/api/businessFinance";
import {exportExcelFile, resetForm} from "@/common/utils/GlobalUtils";
import PublicDialog from "@/components/PublicDialog.vue";
import {UploadFilled} from "@element-plus/icons-vue";

const page = reactive({
    total: 0,
    current: 1,
    size: 10
});

const tableData = ref([]);

const tableOption = ref([
  { label: "部门", prop: "departmentName", minWidth: 80 },
  { label: "项目名称 ", prop: "projectName", minWidth: 80 },
  { label: "年 ", prop: "year", minWidth: 80 },
  { label: "年初预算 ", prop: "annualAmount", minWidth: 80 },
  { label: "预算执行数 ", prop: "budgetExecutionRate", minWidth: 100 },
  { label: "预测值 ", prop: "forecastAmount", minWidth: 80 },
  { label: "全年目标数 ", prop: "annualTargetAmount", minWidth: 100 },
  { label: "全年完成率", prop: "annualBudgetCompletionRate", minWidth: 100 },
  /*   { label: "流出合计", prop: "capitalOutflow" },
     { label: "预算实际金额", prop: "budgetActualAmount" },*/
]);

const form = reactive({
    departmentId:'',
    year:'',
    subjectId:'',
    projectName:'',
    type:'1'
});

const departmentList = ref([]);
const getDepartmentVo = () => {
    fundManagementApi.getDepartmentVo().then(res=>{
        departmentList.value = res.data;
    });
}

const getAnnualBudgetVo = (param) => {
    budgetManagement.getAnnualBudgetVo(param).then(res=>{
        tableData.value = res.data.content;
        page.total = res.data.totalSize;
    });
}

const onQuery = () => {
    page.current = 1;
    page.size = 10;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getAnnualBudgetVo(param);
}

const onReset = () => {
    resetForm(form);
    page.current = 1;
    page.size = 10;
    let param = {
        pageNum: page.current,
        pageSize: page.size,
        param:{
            type:'1'
        }
    };
    form.type = '1';
    getAnnualBudgetVo(param);
}

const onPageChange = (e) => {
    page.current = e.page;
    page.size = e.limit;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getAnnualBudgetVo(param);
}

const exportList = ref([]);
const handleSelectionChange = (e) => {
    exportList.value = e;
}

const onExport = () => {
    exportApi.getAnnualBudgetLeadingOut(form).then(res=>{
        if(res){
            exportExcelFile(res,'全年预算表');
        }
    });
}

const visible = ref(false);
const onConfirm = () => {
    visible.value = false;
}

const uploadFile = (file) => {
    const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(0, 0, 0, 0.7)",
    });
    let uploadFile = new FormData();
    uploadFile.append("file", file.file);
    budgetManagement.importExcel_budgetAnnual(uploadFile).then(res=>{
        if (res.code === '200') {
            loading.close();
            ElMessage.success("导入成功!");
            visible.value = false;
            getAnnualBudgetVo({
                pageNum:1,
                pageSize:10
            });
        }
    });
}

/**
 * 全年预算导入
 *
 */
const onImport = () => {
    visible.value = true;
}

const projectList = ref([]);
const getProjectList = () => {
    budgetManagement.getProjectList().then(res=>{
        projectList.value = res.data;
    });
}

/**
 * 模版下载
 *
 */
const templateDownload = () => {
    budgetManagement.templateDownload_budgetAnnual().then(res=>{
        if(res){
            exportExcelFile(res,'全年预算导入模板');
        }
    });
}

onMounted(()=>{
    getDepartmentVo();
    getProjectList();
    getAnnualBudgetVo({
        pageNum:1,
        pageSize:10,
        param:{
            type:'1'
        }
    });
});
</script>

<style lang="scss" scoped>
.budgetLedgerPage{
  .search-wrap{
    .search-item{
      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>
